<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在线鲜花销售网</title>
<meta name="keywords" content="鲜花，鲜花速递，鲜花网，花店，开业花篮" />
<meta name="description" content="各种鲜花礼品，应有尽有" />
<link href="images/xicon.png" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="css/footer.css">
</head>

<body>
<header>
	<a href="index.html" target="_blank"><img src="images/logo.png" alt="logo" title="点击进入“花”点心思鲜花网" /></a>
</header>

<!-- 注册布局 -->
<div class="register_con">
    <!--<div class="l_con fl">
    	<div class="reg_slogan fr">足不出户 · 鲜花到手</div>
    </div> -->

    <div class="r_con fr">
        <div class="reg_title clearfix">
            <h1 class="fl">用户注册</h1>
            <a href="login.html" class="fr">登录</a>
        </div>
        <div class="reg_form clearfix">
            <form id="myform">
                <ul>
                    <li>
                        <label for="nickname">用户名:</label>
                        <input type="text" id="nickname" name="nickName" placeholder="请输入您的用户名" required >
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label for="pwd">密码:</label>
                        <input type="password" id="pwd" name="pwd" placeholder="请输入6~15位字母、数字还可包含特殊字符">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label for="cpwd">确认密码:</label>
                        <input type="password" id="cpwd" name="cpwd" placeholder="请输入确认密码">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label for="email">邮箱:</label>
                        <input type="text" id="email" name="email" placeholder="请输入有效的邮箱地址"/>
                        <input type="button" id="getCode" onclick="sendCode()"  value="获取验证码"/>
                        <span class="error_tip yzm_tip" >提示信息</span>
                    </li>
                    <li>
                        <label for="yzm">验证码:</label>
                        <input type="text" id="yzm" name="realName" placeholder="请输入验证码">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label for="tel">电话号码:</label>
                        <input type="text" id="tel" name="tel" placeholder="请输入以1开头的11位有效电话号码">
                        <span class="error_tip">提示信息</span>
                    </li>
                    
                    <li class="agreement">
                        <input type="checkbox" id="allow" name="allow" checked>
                        <label for="allow">同意<a href="#">"天天生鲜用户使用协议"</a></label>
                        <span class="error_tip2">提示信息2</span>
                    </li>
                     <li>
                        <input type="button" id="reg" name="" onClick="checkRegister()" value="注 册">
                        <span id="errmsg">提示信息3</span>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>
    
<!-- 版权所有 -->
<footer>
	<div class="fservice">
		<ul class="clearfix">
			<li>
				<span>
					<img src="images/f01.png" >
					<a href="#">热诚服务</a>
				</span>
			</li>
			<li><span><img src="images/f02.png" ><a href="#">客户信赖</a></span></li>
			<li><span><img src="images/f03.png" ><a href="#">时尚原创花艺</a></span></li>
			<li><span><img src="images/f04.png" ><a href="#">订单实拍</a></span></li>
			<li><span><img src="images/f05.png" ><a href="#">优惠多多</a></span></li>
			<li><span><img src="images/f06.png" ><a href="#">1小时配送</a></span></li>
			<li><span><img src="images/f07.png" ><a href="#">售后服务</a></span></li>
		</ul>
	</div>
	
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2021 <a class="copy" href="#" target="_blank">点心思在线鲜花销售系统</a> All Rights Reserverd</p>
    <p>电话：0734-7572842 湘ICP备12345678号-1</p>
</footer>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script >
		//姓名的失去焦点事件
		$("#nickname").blur(function(){
			let nickname = $("#nickname").val();
			//先判断是否为空
			
			if( nickname == '' ){
				//jquery和js是不能在一句话里面混合使用的
				// $()		将js的内容，转换为jquery										jquery转换js : get(0)
				$(this).next().html("用户名不能为空");
				$(this).next().show();
				return;
			}
			
			//不是空，则做正则表达式
			let reg = /^[\u4e00-\u9fa5]{2,6}$/;
			if( reg.test(nickname) ){
				$(this).next().hide();
				return;
			}
			$(this).next().html("用户名必须是2-6个汉字组成");
			$(this).next().show();
			
		});
		//获得焦点事件
		$("#nickname").focus(function(){
			$(this).next().hide();
		});
		
		
		$("#pwd").blur(function(){
			let pwd = $("#pwd").val();
			//先判断是否为空
		
			if( pwd == '' ){
				//jquery和js是不能在一句话里面混合使用的
				// $()		将js的内容，转换为jquery										jquery转换js : get(0)
				$(this).next().html("密码不能为空");
				$(this).next().show();
				return;
			}
			
			//不是空，则做正则表达式
			let reg = /^[a-zA-Z\d\ddd]{6,16}$/;
			if( reg.test(pwd) ){
				$(this).next().hide();
				return;
			}
			$(this).next().html("密码必须是6-16个字母，数字和特殊符号组成");
			$(this).next().show();        
			
		});
		$("#pwd").focus(function(){
			$(this).next().hide();
		});
		
		//邮箱
		$("#email").blur(function(){
			let email = $("#email").val();
			//先判断是否为空
		console.log(email=='');
			if( email == '' ){
				//jquery和js是不能在一句话里面混合使用的
				// $()		将js的内容，转换为jquery										jquery转换js : get(0)
				$(this).next().next().html("邮箱不能为空");
				$(this).next().next().show();
				return;
			}
			
			//不是空，则做正则表达式
			let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			if( reg.test(email) ){
				$(this).next().next().hide();
				return;
			}
			$(this).next().next().html("邮箱不正确请重新输入");
			$(this).next().next().show();        
			
		});
		$("#email").focus(function(){
			$(this).next().next().hide();
		});
		//发送验证码
		function sendCode(){
			//严格意义上来说，所有的值都需要验证一遍
			let email = $( "#email" ).val();
			let name = $("#nickname").val();
			//发送的按钮禁用掉
			$("#getCode").attr("disabled","true");
			//开始发送ajax请求
			$.post("member",{
				op:"sendCode",
				name:name,
				email:email
			},function(data){
				if( data === "1" ){
					let time = 180;
					let interval = setInterval(function (){
						if(time > 0){
							time--;
							$("#getCode").val(time+"S");
						}else{
							//到时间了
							clearInterval(interval);
							//按钮恢复可用
							$("#getCode").attr("disabled","false");
						}
						
					},1000);
				}else{
					$("#getCode").attr("disabled","false").val("重新获取");
					alert("邮件发送失败，请检查网络.....");
				}
			},"text");
		}
		
		
		function checkRegister(){
			//取值，但是，请注意，严格意义上来说，要先验证，看所有的值是不是符合规则
			$("#myform input").each(function(){
				$(this).blur();
			});
			//判断所有的错误信息
			$(".error_tip").each(function(){
				if( $(this).css("display") !== "none" ){
					return;
				}
			});
			
			//开始取值，发送ajax
			let nickname = $("#nickname").val();
			let email = $("#email").val();
			let pwd = $("#pwd").val();
			let yzm = $("#yzm").val();
			let tel = $("#tel").val();
			
			$.post("member",{
				op:'reg',
				nickname: nickname,
				email: email,
				pwd: pwd,
				yzm: yzm,
				tel: tel
			},function(data){
				if( data === "-1"){
					$("#errmsg").html("验证码错误，请验证后重新注册").show();
				}else if( data === "0" ){
					$("#errmsg").html("用户名、邮箱或电话号码已存在，请重新注册").show();
				}else{
					$("#errmsg").html("注册成功").show();
					setTimeout(()=>{location.href = "login.html"},1000);
				}
			},"text")
		}
</script>
</body>
</html>
